<template>
    <div class='dialog'>
        <div class='newAdd dialog-con depotContent'>
            <div class="companynews">
                <h2>新增仓库信息</h2>
            </div>
            <div class="depotInfoMAtion">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"  class="demo-ruleForm" :label-position="labelPosition">
                    <el-form-item label="仓库编码" prop="depotCode">
                        <el-input v-model="ruleForm.depotCode"></el-input>
                    </el-form-item>
                    <el-form-item label="仓库名称" prop="depotName">
                        <el-input v-model="ruleForm.depotName"></el-input>
                    </el-form-item>
                    <el-form-item label="仓库地址" prop="depotAddress">
                        <el-input v-model="ruleForm.depotAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="负责人姓名" prop="depotPerson">
                        <el-input v-model="ruleForm.depotPerson"></el-input>
                    </el-form-item>
                    <el-form-item label="负责人电话" prop="depotPhone">
                        <el-input v-model="ruleForm.depotPhone"></el-input>
                    </el-form-item>
                        <el-form-item label="仓库类别" prop="depotType">
                        <el-select v-model="ruleForm.depotType" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="结算方式" prop="payType" class="cooper">
                        <el-select v-model="ruleForm.payType" placeholder="请选择">
                            <el-option
                            v-for="item in options1"
                            :key="item.id"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="btn">
                        <el-button @click="submitForm('ruleForm')" type="primary"  :disabled="isWareShow" size="medium">提交</el-button>
                        <el-button @click="cancel"  size="medium">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    inject:['reload'],
    data(){
        return{
            //创建按钮是否禁用
            isWareShow:false,
            labelPosition:'left',
            options:[
                {value:"1",label:"本地仓库"},
                {value:"2",label:"委外仓库"}
            ],
            options1:[
                {value:"按月结",label:"按月结",id:"1"}
            ],
            ruleForm: {
                depotCode:'',
                depotName:'',
                depotAddress:'',
                depotType:'',
                depotPerson:'',
                depotPhone:'',
                payType:'',
                userId:1
            },
            rules: {
                depotCode: [
                    { required: true, message: '请输入仓库编码', trigger: 'blur' },
                    { min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur' }
                ],
                depotName: [
                    { required: true, message: '请输入仓库名称', trigger: 'change' }
                ],
                depotAddress: [
                    { required: true, message: '请输入仓库地址', trigger: 'change' }
                ],
                depotType: [
                    { required: true, message: '请输入仓库类别', trigger: 'change' }
                ],
                depotPerson: [
                    { required: true, message: '请输入仓库负责人', trigger: 'change' }
                ],
                depotPhone: [
                    { required: true, message: '请输入负责人电话', trigger: 'change' },
                    { min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur' }
                ],
                payType: [
                    { required: true, message: '请选择结款方式', trigger: 'change' }
                ]
            }
        }
    },
    methods:{
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.confirm()
                } else {
                    return false;
                }
            });
        },
         //点击确定按钮，掉接口
       confirm(){
            let parmas=this.ruleForm
            this.isWareShow=true
            let success=data=>{
                if(data.code=='OK'){
                    this.isWareShow=false
                    this.reload()
                    this.$emit('closeDialog')
                    this.$message.success('添加成功')
                }else{
                    this.isWareShow=false
                    this.$message.error(data.msg)
                }
            }
            this.api.depotAdd(parmas,success)
        },
        cancel(){
            this.$emit('closeDialog')
        }
    }
}
</script>
<style scoped>
.depotContent .el-select{
   width:300px;
}
.depotContent .el-input{
    width:300px;
}
</style>
<style lang="scss" scoped>
.depotContent{
    width:500px;
    height:540px;
    .companynews{
        h2{
            height:45px;
            line-height: 45px;
            font-size: 18px;
            text-align: center;
            background: #eee;
            color:#606266;
        }
    }
    .depotInfoMAtion{
        margin-left: 20px;
        margin-top:5px;
    }
    .btn{
      width: 80%;
      text-align: center;
    }
}
</style>




